<template>
  <!-- 在线监测 -->
  <div>
    <div class="container">
      <div class="container-top">
        <div class="back" @click="goBack"></div>
      </div>
      <div class="center borderStyle centerbox relative">
        <div
          class="title centertitleStyle centerbox title-relative"
          @click="titleClick('在线监测异常装置分布')"
        >物联感知设备分布</div>
        <IotCenter :dataList="dataList" :xAxisData="xAxisData" />
      </div>
      <div class="head">
        <!-- <IotHead /> -->
        <div class="onlie-body bigTableStyle">
          <el-form :inline="true" :model="formInline" label-width="1rem">
            <el-row>
              <el-col :span="5">
                <el-form-item label="单位名称:">
                  <el-select v-model="formInline.dwmc" clearable filterable placeholder="单位名称">
                    <el-option
                      v-for="item in CompanyList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="变电站:">
                  <el-select v-model="formInline.bdz" clearable filterable placeholder="变电站">
                    <el-option
                      v-for="item in SubstationList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="运维班组:">
                  <el-select v-model="formInline.ywb" clearable filterable placeholder="运维班">
                    <el-option
                      v-for="item in TeamList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="电压等级:">
                  <el-select v-model="formInline.dydj" clearable placeholder="电压等级">
                    <el-option
                      v-for="item in VoltageList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="设备分类:">
                  <el-select v-model="formInline.sbfl" clearable placeholder="设备分类">
                    <el-option
                      v-for="item in sbflOptions"
                      :key="item.code"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="生产厂家:">
                  <el-input v-model="formInline.sccj" placeholder="输入名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="设备名称:">
                  <el-input v-model="formInline.sbmc" placeholder="设备名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="在线状态:">
                  <el-select v-model="formInline.yxzt" clearable placeholder="运行状态">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" class="btn">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="clear">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      
      <!-- <div class="center centerbox borderStyle">
      <OnlieCenter />
      </div>-->
      <div class="bottom borderStyle centerbox relative">
        <div
          class="title centertitleStyle centerbox title-relative"
          @click="titleClick('具体记录')"
        >具体记录</div>
        <!-- <IotBottom /> -->
        <div class="smart bigTableStyle">
          <div class="smart-container colcenterbox">
            <el-table
            border
              :data="tableData"
              style="width: 100%"
              height="100%"
              @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="myIndex" label="序号" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="SSDS" label="单位名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="WHBZ" label="运维班" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="BDZ" label="变电站" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="SBMC" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="SBLX" label="设备类型" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="YXZT" label="运行状态" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="ZXZT" label="在线状态" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="TYSJ" label="投运时间" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="TYSJ" label="退运时间" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="SCCJ" label="生产厂家" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="XH" label="型号" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="CCBH" label="出厂编号" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="SBLY" label="设备来源" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="AZWZ" label="安装位置" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
          </div>
          <div class="smart-page elPaginationStyle">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pages.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pages.size"
              layout=" total, prev, pager, next, sizes,jumper"
              :total="pages.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { publicAPIModule } from "@/store/modules/public";
// import IotHead from "../../commponents/IotHead/index.vue";
import IotCenter from "../../commponents/IotCenter/index.vue";
// import IotBottom from "../../commponents/IotBottom/index.vue";

interface optionList {
  value: string;
  label: string;
}
// interface tableDataList {
//   index: number;
//   alarmTime: string;
//   alarmPowerStation: string;
//   alarmEquipment: string;
//   alarmTemp: string;
// }
interface objType {
  row: object;
  rowIndex: number;
}
@Component({
  components: {
    // IotHead,
    IotCenter,
    // IotBottom,
  },
})
export default class Iot extends Vue {
  private options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "01",
      label: "在线",
    },
    {
      value: "02",
      label: "离线",
    },
  ];
  private sbflOptions: Array<optionList> = [
    {
      label: "辅控设备",
      value: "fksb",
    },
    {
      label: "在线监测",
      value: "zxjc",
    },
    {
      label: "机器人",
      value: "jqr",
    },
    {
      label: "摄像头",
      value: "sxt",
    },
  ];
  private value: string = "";
  formInline = {
    dwmc: "",
    ywb: "",
    bdz: "",
    dydj: "",
    sbmc: "",
    yxzt: "",
    sccj: "",
    sbfl: "",
  };
  pages = {
    Size: 10,
    page: 1,
    total: 0,
  };

  private onSubmit() {
    // alert(this.formInline)
    this.initTable();
  }
  clear() {
      this.formInline.dwmc = ''
      this.formInline.ywb =''
      this.formInline.bdz =''
      this.formInline.dydj = ''
      this.formInline.sbmc =''
      this.formInline.yxzt =''
      this.formInline.sccj = ''
      this.formInline.sbfl = ''
      this.initTable();
  }

  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = publicAPIModule.CompanyList || [];
    console.log(CompanyList,1);
    
    return CompanyList;
  }
  // 下拉框变电站电压等级
  get VoltageList() {
    let VoltageList = publicAPIModule.VoltageList || [];
    console.log(VoltageList, 4)
    return VoltageList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = publicAPIModule.SubstationList || [];
    console.log(SubstationList,2);
    
    return SubstationList;
  }
  // 下拉框运维班组
  get TeamList() {
    let TeamList = publicAPIModule.TeamList || [];
    console.log(TeamList,3);
    
    return TeamList;
  }
  tableData = [
    // {
    //   index: 1,
    //   alarmTime: "110kV商西变电站",
    //   alarmPowerStation: "主变",
    //   alarmEquipment: "变压器",
    //   alarmTemp: "80°",
    // },
  ];
  //传图表得数据
  public xAxisData: any = ["机器人", "辅控设备", "在线监测", "摄像头"];
  public dataList: any = [
    { name: "宁波理工", total: 400, early: 300, onLine: 200 },
    { name: "长圆深瑞", total: 400, early: 300, onLine: 200 },
    { name: "西安金源", total: 400, early: 300, onLine: 200 },  
    { name: "保定天威", total: 400, early: 300, onLine: 200 },
    { name: "山东电力", total: 400, early: 300, onLine: 200 },
    { name: "未知厂家", total: 400, early: 300, onLine: 200 },
    { name: "宁波理工", total: 400, early: 300, onLine: 200 },
    { name: "长圆深瑞", total: 400, early: 300, onLine: 200 },
    { name: "西安金源", total: 400, early: 300, onLine: 200 },
    { name: "保定天威", total: 400, early: 300, onLine: 200 },
    { name: "山东电力", total: 400, early: 300, onLine: 200 },
    { name: "未知厂家", total: 400, early: 300, onLine: 200 },
  ];

  public init() {
    // 获取柱状图信息
    (this as any).$services
      .getChartData({
        method: "post",
      })
      .then((result: any) => {
        // console.log(
        //   "图表信息:。。。。。。。。。。。。。。。。。。。。。",
        //   result
        // );
        if (result) {
          var data = result.data;
          // for(var i = 0; i<= data.length;i++) {
          //   this.xAxisData = data[i].name;
          // }
          this.dataList = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  tableSelect: Array<object> = [];

  private handleSizeChange(val: number) {
    this.pages.Size = val
    this.initTable()
    // console.log(`每页 ${val} 条`);
  }

  private handleCurrentChange(val: number) {
    this.pages.page = val
    this.initTable()
    // console.log(`当前页: ${val}`);
  }

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);

    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  initTable() {
    let parems = {
      bdz: this.formInline.bdz,
      dydj: this.formInline.dydj,
      page:this.pages.page,
      sbfl: this.formInline.sbfl,
      sbmc: this.formInline.sbmc,
      sccj: this.formInline.sccj,
      size:this.pages.Size,
      ssdw: this.formInline.dwmc,
      whbz: this.formInline.ywb,
      zxzt: this.formInline.yxzt,
    };
    (this as any).$services
      .queryIOTDeviceList({ data: parems, method: "post" })
      .then((res: any) => {
        // console.log(res.data);
        this.pages.total = res.data.total;
        // console.log(this.pages.total);
        let page = this.pages.page;
      let size = this.pages.Size;
        this.tableData = res.data.records.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    let params=this.$route.params||{}
    console.log(this.$route)
    console.log(params)
    let sbfl=params.sbfl
    this.formInline.sbfl=sbfl
    this.init();
    this.initTable();
    // console.log(this.xAxisData);
  }
  // 返回按钮
  private goBack(val: string) {
    // window.history.back();
    this.$router.push("/homepage/index");
  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0.24rem 0.24rem 0.24rem;
  // background-color: pink;
  &-top {
    width: 100%;
    // height: 2%;
    // background-color: pink;
    display: flex;
    align-items: center;
    .back {
      width: 0.9rem;
      height: 0.31rem;
      margin-left: auto;
      background-image: url("../../../../assets/img/return.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  .head {
    width: 100%;
    height: 10%;
    // background-color: grey;
    // margin-bottom: 0.29rem;
  }
  .center {
    width: 100%;
    height: 26%;
    padding-top: 1%;
    // background-color: pink;
    // margin-bottom: 0.38rem;
  }
  .bottom {
    width: 100%;
    height: 56%;
    // background-color: rgb(179, 245, 177);
  }
}
.onlie-body {
  .el-form-item {
    margin-bottom: 0.05rem;
  }
  .el-form--inline .el-form-item__content {
    width: 55%;
  }
}
.smart {
  width: 100%;
  height: 100%;
  // padding: 7% 2% auto 2%;
  padding-top: 2.5%;
  padding-left: 1%;
  padding-right: 1%;
  &-container {
    width: 100%;
    height: 88%;
    // background-color: pink;
  }
  &-page {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.15rem;
  }
}
</style>
